<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title></title>
    <script src='./vue.global.js'></script>

    <!-- main -->
    <link rel="stylesheet" href="./css/main.css">

    <!-- demo-dynamic -->
    <link rel="stylesheet" href="./css/demo-dynamic.css">

</head>

<body>
    <div id='app'>
        <div class="wrapper">
            <ul class="tabs">
                <li v-for="t in tabs" @click="onTabClick(t)" :class="{active:t.component===currentComponent}">{{t.text}}
                </li>
            </ul>
            <div class="content">
                <component :is="currentComponent"></component>
            </div>
        </div>
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    tabs: [
                        { component: "demo-dynamic", text: "动态组件" },
                        { component: "demo-async", text: "异步组件" },
                        { component: "demo-ref", text: "ref引用" },
                    ],
                    currentComponent: "demo-dynamic"
                }
            },
            methods: {
                onTabClick(t) {
                    this.currentComponent = t.component
                }
            },
            computed: {}
        })
    </script>

    <!-- /* 动态组件案例 */ -->
    <script src="./js/demo-dynamic.js"></script>

    <!-- 异步组件案例 -->
    <script src="./js/demo-async.js"></script>

    <!-- ref引用案例 -->
    <script src="./js/demo-ref.js"></script>

    <script>
        app.mount('#app')

    </script>
</body>

</html>